<template>
  <div class="filter-container card-box">
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span class="font-b">{{title}}</span>
      </div>
      <div>
        <div class="card-item-box" v-for="(item,index) in dataList" :key="index">
          <el-divider class="font-c">{{item[name]}}</el-divider>
          <div v-if="value" class="card-value">{{item[value]}}</div>
          <div v-if="values !=null" class="card-value">
            <div v-for="(v,cindex) in values" :key="cindex" class="card-values">
              {{v.name}} :{{item[v.value]||0}}
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from "@/router/axios";
import url from '@/const/apiURL'
import { Message } from 'element-ui'

export default {
  name: 'buttons',
  data () {
    return {
      dataList: []
    }
  },
  props: {
    permissions: {
      type: Object,
      default: function () {
        return {}
      }
    },
    queryEntity: {
      type: Object,
      default: function () {
        return { key: 'key' }
      }
    },
    title: {
      type: String,
      default: function () {
        return ""
      }
    },
    value: {
      type: String,
      default: function () {
        return "quantity"
      }
    },
    values: {
      type: Array,
      default: function () {
        return null
      }
    },
    name: {
      type: String,
      default: function () {
        return "name"
      }
    },
    url: {
      type: String,
      default: function () {
        return ""
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.handleUrl(this.queryEntity).then(result => {
        if (result) {
          this.dataList = result
        }
      })
    },
    handleUrl (data) {
      return request({
        url: this.url,
        method: 'post',
        data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-box {
  padding-top: 8px;
  padding-left: 8px;
  border: #ebeef5 1px solid;
  clear: both;
}
.font-b {
  font-size: 20px;
  font-weight: bold;
}

.font-c {
  font-size: 30px;
  font-weight: bold;
  border-bottom: 1px solid gray;
}

.card-item-box {
  width: 45%;
  padding: 3px;
  float: left;
  height: 100%;
  text-align: center;
  font-size: 16px;
  padding: 3px;
  border: 1px solid gray;
}
.card-value {
  height: 60px;
  width: 90%;
  font-size: 36px;
}
.card-values {
  height: 30px;
  width: 50%;
  font-size: 26px;
  float: left;
}
</style>
